<template>
  <div class="_wz_receiveOrgNotice">
    <Card dis-hover :bordered="true">
      <template #title>搜索</template>
      <Form ref="formSearch" :model="formDataSearch" label-position="right" :label-width="100" inline>
        <FormItem label="通知标题">
          <i-input v-model="formDataSearch.noticeTitle" placeholder="请输入通知标题" clearable />
        </FormItem>
        <FormItem label="通知等级">
          <i-select v-model="formDataSearch.noticeLv" filterable placeholder="请选择通知等级" clearable>
            <Option value="1">普通</Option>
            <Option value="2">重要</Option>
            <Option value="3">紧急</Option>
          </i-select>
        </FormItem>
        <FormItem label="回复类型">
          <i-select v-model="formDataSearch.noticeReplyType" filterable placeholder="请选择回复类型" clearable>
            <Option value="0">无需回复</Option>
            <Option value="1">需要回复</Option>
          </i-select>
        </FormItem>
        <FormItem label="通知附件">
          <i-select v-model="formDataSearch.noticeFileType" filterable placeholder="请选择通知附件" clearable>
            <Option value="0">无文件</Option>
            <Option value="1">有文件</Option>
          </i-select>
        </FormItem>
        <FormItem label="已读状态">
          <i-select v-model="formDataSearch.noticeReadState" filterable placeholder="请选择已读状态" clearable>
            <Option value="0">未读</Option>
            <Option value="1">已读</Option>
          </i-select>
        </FormItem>
        <FormItem label="回复状态">
          <i-select v-model="formDataSearch.noticeReplyState" filterable placeholder="请选择回复状态" clearable>
            <Option value="0">未回复</Option>
            <Option value="1">已回复</Option>
          </i-select>
        </FormItem>


        <FormItem>
          <Button type="primary" @click="searchSubmit">搜索</Button>
        </FormItem>
      </Form>
    </Card>
    <Card dis-hover :bordered="true" style="height: 100%;overflow: hidden;margin: 10px 0 0;">
      <template #title>列表</template>
      <wzTbale ref="wzTbale" :tableData="tableData"></wzTbale>
    </Card>



    <Drawer :title="formTitle" v-model="formOperation" width="1000" :draggable="true">
      <receiveOrgNoticeDetails v-if="formOperation" :selectData="selectData" @closeFun="closeFun">
      </receiveOrgNoticeDetails>
    </Drawer>

  </div>
</template>
<script>


import { resolveComponent, getCurrentInstance, inject, nextTick, reactive, toRefs, toRef, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, ref, defineComponent, toRaw, watch } from 'vue'
import { useRouter, useRoute } from "vue-router";

import { useMainStore } from '../../store'  //pinia 使用 类似 vuex
import { storeToRefs } from 'pinia'//pinia 使用 类似 vuex
const mainStore = useMainStore() //pinia 使用 类似 vuex


import wzTbale from "../../components/table/index.vue";
import { systemDictList } from "../../util/commonInterfaces.js";//字典接口
import receiveOrgNoticeDetails from "../cooperate/receiveOrgNoticeDetails.vue";//设备设施 台账详情

//reactive
export default defineComponent({
  name: 'receiveOrgNotice',//组件名称
  components: {
    wzTbale,//表格
    receiveOrgNoticeDetails,//设备设施 台账详情
  },//组件引用
  setup(props, context) {


    const apiUrl = inject('$apiUrl'); // 变量全局化 后台地址
    const $axios = inject('$axiosInterceptor');// 变量全局化 axios
    const $ViewUIPlus = inject('$ViewUIPlus');//引用全局组件
    const router = useRouter();//路由跳转使用

    // 用于获取$refs
    const wzTbale = ref();


    const state = reactive({
      formDataSearch: {},//搜索条件

      tableData: {
        url: apiUrl.noticeGovMessageNoticeGovMessageRecordPageList,//请求地址
        method: 'post',//请求方式
        where: {},//搜索条件
        height: '100%',//表格高度 auto
        page: true,//分页是否使用
        columns: [//表头数据
          { type: 'index', width: 70, align: 'center', title: '序号' },
          { title: '通知编号', minWidth: 130, key: 'noticeNo', tooltip: true, resizable: true, },
          { title: '通知标头', minWidth: 130, key: 'noticeTitle', tooltip: true, resizable: true, },

          {
            title: '通知等级', minWidth: 130, key: 'noticeLv', tooltip: true, resizable: true, render: (h, params) => {
              if (params.row.noticeLv == 1) {//普通
                return h(resolveComponent('Tag'), { type: 'dot', color: 'green' }, '普通');
              } else if (params.row.noticeLv == 2) {//重要
                return h(resolveComponent('Tag'), { type: 'dot', color: 'orange' }, '重要');
              } else {//紧急
                return h(resolveComponent('Tag'), { type: 'dot', color: 'red' }, '紧急');
              }
            }
          },
          {
            title: '通知回复状态', minWidth: 140, key: 'noticeReplyType', tooltip: true, resizable: true, render: (h, params) => {
              if (!!params.row.noticeReplyType) {//需要回复
                return h(resolveComponent('Tag'), { type: 'dot', color: 'orange' }, '需要回复');
              } else {//不需回复
                return h(resolveComponent('Tag'), { type: 'dot', color: 'green' }, '不需回复');
              }
            }
          },
          {
            title: '通知附件', minWidth: 140, key: 'noticeFileType', tooltip: true, resizable: true, render: (h, params) => {
              if (params.row.noticeFileType == 0) {//无文件
                return h(resolveComponent('Tag'), { type: 'dot', color: 'orange' }, '无文件');
              } else {//有文件
                return h(resolveComponent('Tag'), { type: 'dot', color: 'green' }, '有文件');
              }

            }
          },
          {
            title: '通知限时回复时间', minWidth: 130, key: 'noticeEndTime', tooltip: true, resizable: true, render: (h, params) => {
              if (!!params.row.noticeEndTime) {//蓝色
                return h('span', params.row.noticeEndTime)
              } else {//蓝色
                return h(resolveComponent('Tag'), { type: 'dot', color: 'orange' }, '未限制');
              }
            }
          },
          {
            title: '签收时间', minWidth: 130, key: 'readTime', tooltip: true, resizable: true, render: (h, params) => {

              if (!!params.row.readTime) {//蓝色
                return h('span', params.row.noticeEndTime)
              } else {//蓝色
                return h(resolveComponent('Tag'), { type: 'dot', color: 'orange' }, '未签收');
              }
            }
          },
          { title: '主管单位名称', minWidth: 130, key: 'govName', tooltip: true, resizable: true, },
          { title: '主管单位下发人', minWidth: 130, key: 'govContact', tooltip: true, resizable: true, },
          {
            title: '操作', width: 80, fixed: 'right', render: (h, params) => {

              var operationButtons = [];
              operationButtons.push(
                h('span', {
                  style: { "color": "#2d8cf0", "cursor": "pointer" },
                  onClick: async () => {
                    console.log(params.row)
                    if (params.row.noticeReadState == 0) {//发起签收
                      await $axios.post(apiUrl.noticeGovRecordNoticeGovMessageRecordRead, { uuid: params.row.uuid }).then((res) => {
                        if (res.data.code == 0) {
                          // $ViewUIPlus.Message.success('消息已读');
                          searchSubmit()

                        } else {
                          // $ViewUIPlus.Message.error('保存失败');
                        }
                      }).catch((err) => {
                        console.log("失败", err)
                      })
                    }


                    state.selectData = JSON.parse(JSON.stringify(params.row));
                    state.formTitle = '详情';
                    state.formOperation = true;
                  }
                }, params.row.noticeReadState == 1 ? "查看" : '签收')
              )
              return operationButtons;
            }
          },
        ],
        pagingParameters: {// 分页参数
          page: 'pageNo',
          limit: 'pageSize'
        },
        format: {//返回数据格式
          list: ['data'],//数据list
          count: ['count'],//数据总量
        },
      },


      selectData: {},//选中数据
      formOperation: false,//弹框状态
      formTitle: '',//弹框标题
    });



    //搜索方法
    const searchSubmit = () => {
      let formDataSearch = JSON.parse(JSON.stringify(state.formDataSearch));
      state.tableData.where = formDataSearch;
      wzTbale.value.tableLoadData(true)

    }


    //添加修改触发后关闭刷新
    const closeFun = (data) => {
      if (data) {//添加修改 刷新表单
        searchSubmit()
      }
      state.formOperation = false;

    }


    // 其他的生命周期
    onBeforeMount(() => {//beforeMount挂载前状态 // console.log("App ===> 相当于 vue2.x 中 beforeMount")

    })
    onMounted(async () => {//mounted 挂载结束状态  // console.log("App ===> 相当于 vue2.x 中 mounted")

    })

    // 注意，onBeforeUpdate 和 onUpdated 里面不要修改值
    onBeforeUpdate(() => {//beforeUpdate 更新前状态 // console.log("App ===> 相当于 vue2.x 中 beforeUpdate")

    })

    onUpdated(() => {//updated 更新完成状态 // console.log("App ===> 相当于 vue2.x 中 updated")

    })

    onBeforeUnmount(() => {//beforeDestroy 销毁前状态  // console.log("App ===> 相当于 vue2.x 中 beforeDestroy")
    })

    onUnmounted(() => {//destroyed 销毁完成状态  // console.log("App ===> 相当于 vue2.x 中 destroyed")
    })

    return {
      ...toRefs(state),
      searchSubmit,//搜索方法
      wzTbale,// ref 使用 封装的表格
      closeFun
    }
  }
})


</script>
<style lang="less">
._wz_receiveOrgNotice {
  padding: 10px;
  height: 100%;
  display: flex;
  flex-direction: column;

  .ivu-card-body {
    height: calc(100% - 51px);
  }
}
</style>
